import React from 'react';
import { Menu } from '@arco-design/web-react';
import { useTranslation } from 'react-i18next';
import { useNavigate, useLocation } from 'react-router-dom';
import { useAppSelector } from '../../hooks/useAppSelector';
import menuConfig, { MenuItemConfig } from './menuConfig';
import './Sidebar.css';

const MenuItem = Menu.Item;

const Sidebar: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const location = useLocation();
  const sidebarCollapsed = useAppSelector((state: any) => state.theme?.sidebarCollapsed || false);

  const handleMenuItemClick = (path: string) => {
    navigate(path);
  };

  const selectedKeys = () => {
    // 根据当前路径找到匹配的菜单项
    const currentItem = menuConfig.find(item => location.pathname === item.path);
    if (currentItem) {
      return [currentItem.key];
    }
    
    // 默认选中首页
    return ['1'];
  };

  return (
    <Menu
      className="app-sidebar"
      mode="vertical"
      selectedKeys={selectedKeys()}
      style={{ height: '100%' }}
    >
      {menuConfig.map((item: MenuItemConfig) => {
        const IconComponent = item.icon;
        return (
          <MenuItem 
            key={item.key} 
            onClick={() => handleMenuItemClick(item.path)}
          >
            <IconComponent />
            {!sidebarCollapsed && t(item.titleKey)}
          </MenuItem>
        );
      })}
    </Menu>
  );
};

export default Sidebar;